<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="display: flex; justify-content: space-around">
    <fieldset>
        <legend>
            注册
        </legend>
        <table>
            <tr>
                <td>
                    名字
                </td>
                <td>
                    <input id="regist-id">
                </td>
            </tr>
            <tr>
                <td>
                    密码
                </td>
                <td>
                    <input id="regist-password">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button" id="regist-btn" style="width: 100%;background: #00B7FF">注册</button>
                </td>
            </tr>
        </table>
    </fieldset>
    <fieldset>
        <legend>
            登录
        </legend>
        <table>
            <tr>
                <td>
                    名字
                </td>
                <td>
                    <input id="login-id">
                </td>
            </tr>
            <tr>
                <td>
                    密码
                </td>
                <td>
                    <input id="login-password">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button" id="login-btn" style="width: 100%;background: #00B7FF">登录</button>
                </td>
            </tr>
        </table>
    </fieldset>
</div>
<div>
    <button onclick="getUserInfo(this)">获取用户信息 </button>
    <div>

    </div>
</div>
</body>
<script src="jquery-2.2.3.min.js"></script>
<script>
    $(function(){
        //入口函数，通常使用window.onload是一样的功效，区别：
        //在jquery文件加载之后，同时当前的windo虾米那已经有了$和jquery对象之后，才去执行
        $('#regist-btn').on('click',function () {
            regist()
        })
        $('#login-btn').on('click',function () {
            login()
        })
    })
    function getUserInfo(obj) {
        future.ajax({
            url:'/users/getUserInfo',
            type:'get',
            success:function (result) {
                $(obj).siblings('div').text(JSON.stringify(result));
            }
        })
    }
    function regist() {
        future.ajax({
            url: '/users/regist',
            type: 'post',
            data: {
                name:$('#regist-name').val(),
                pwd:$('#regist-pwd').val()
            },
            success:function (result) {
                alert(result)
            }
        })
    }
    function login() {
        future.ajax({
            url: '/users/login',
            type: 'get',
            data: {
                name:$('#login-name').val(),
                pwd:$('#login-pwd').val()
            },
            success:function (result) {
                alert(result)
            }
        })
    }
    var future = {}
    future.baseurl = 'http://localhost:3000'
    future.ajax = function (option) {
        $.ajax({
            beforeSend:function(request){
                request.setRequestHeader('token','zupeng',window.localStorage.token)
            },
            url:future.baseurl + option.url,
            type:option.type || 'post',
            //dataType:'JSON'
            async:option.async || false,
            data:option.data,
            success:function (result) {
                if (option.success) {
                    option.success(result)
                }
            },
            error:function (error) {
                if (option.error) {
                    option.error(error)
                } else {
                    alert(error.responseText)
                }
            }
        })
    }


    /**
     * 设置cookie
     */
    function setCookie(name, value, seconds) {
        seconds = seconds || 0;   //conds有值就直接赋值，没有为0，这个根php不一样。
        var expires = "";
        // cookies随浏览器关闭而失效的方法:
        //     如果不设置Expires的属性那么Cookie的存活时间就是在关闭浏览器的时候。
        if (seconds != 0 ) {      //设置cookie生存时间
            var date = new Date();
            date.setTime(date.getTime()+(seconds*1000));
            expires = "; expires="+date.toGMTString();
        }
        document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
    }

    /**
     * 读取cookie
     */
    function getCookie(name) {
        var nameEQ = name + '='
        var ca = document.cookie.split(';') // 把cookie分割成组
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i] // 取得字符串
            while (c.charAt(0) == ' ') { // 判断一下字符串有没有前导空格
                c = c.substring(1, c.length) // 有的话，从第二位开始取
            }
            if (c.indexOf(nameEQ) == 0) { // 如果含有我们要的name
                return unescape(c.substring(nameEQ.length, c.length)) // 解码并截取我们要值
            }
        }
        return false
    }

    /**
     * 检查cookie
     * @param c_name
     * @return {boolean}
     */
    function checkCookie(c_name) {
        username = getCookie(c_name);
        console.log(username);
        if (username != null && username != "") {
            return true;
        }
        else {
            return false;
        }
    }

    /**
     * 清除cookie
     * @param name
     */
    function clearCookie(name) {
        setCookie(name, "", -1);
    }
</script>
</html>